<template>
  <div class="total">
    <div class="title1"> 
        <img src="@/assets/img/module4/part1/SketchPng26505d59e150617f0b34239825c581f5e252d1a01d3d1248137c55940dc1da99.png" class="image1" />
        <span class="text_1">空域容量评估</span>
        <img src="@/assets/img/module4/part1/SketchPnge98c6bf1fe552f69e9323b59eaf92d6bef1bbd085f1b8cecefc968590eb3010d.png" class="image2" />
    </div>
    <div class="table-choice">
      <button  @click="selectUpdown"class="button">起降区</button>
      <button  @click="selectRoute"class="button">航 路</button>
      <button  @click="selectTask"class="button">作业区</button>
    </div>
    <div class="layout">
        <!-- 条件渲染：点击起降区后显示表格和选择栏 -->
        <!-- 表格 -->
         
        <div class="left_table">
          <div class="operation-bar">
            <div class="dropdown-wrapper">
              <select v-model="order" class = "dropdown-native"  placeholder=" " >
                <option class="selectOption" value=null>全体类型</option>
                <option class="selectOption" value=1>第1类型</option>
                <option class="selectOption" value=2>第2类型</option>
                <option class="selectOption" value=3>第3类型</option>
                <option class="selectOption" value=4>第4类型</option>
                <option class="selectOption" value=5>第5类型</option>
              </select>
            </div>
            <div class="search-wrapper">
              <input type="text" class="search-input" placeholder="关键字搜索"  v-model="searchKeyword" />
            </div>

            <!-- 查询按钮 (Element UI) -->
            <el-button type="primary" icon="el-icon-search" class="el-query-button" @click="handleSearch">查询</el-button>
          </div>

          <div class="table_p">
            <TableComponent :tableData="tableData" @row="displayRowData" 
            :name_label="name_label"/>
          </div>
        </div>
        <!-- 右侧表单 -->
        <div class="right_form">
        <FormComponent 
          :formData="formData" 
          :type="type"
          :label1="label1"
          :label2="label2"
          :label3="label3"
          :safedis = "safedis"
          :accLabel="accLabel"
          :monitor_num="monitor_num"
          :post_ui="post_ui"
          @submit="submitForm" 
          @reset="resetForm"
          :selectedRow="selectedRow"
          :object_post="object_post"
          :safety_ui="safety_ui"
          :if_visiable="if_visiable"
          :show_if="show_if"
        />
        </div>
      </div>
  </div>
</template>
 formData: {
      type: Object,
      required: true,
    },
<script>
import TableComponent from '@/components/Table4.vue';
import FormComponent from '@/components/Form4.vue';
import axios from 'axios';

export default {
  name: "Module4CapacityAssessment",
  components: {
    TableComponent,
    FormComponent
  },
  data() {
    return {
      tableData: [],
      formData: {
      },
      order:{
        type:Number,
      },
      if_visiable:true,
      extraInputLabel: null,
      showContent: false,
      showNewInput: false,
      row: null,
      show_if:false,
      searchKeyword: '',
      selectedRow: null,
      post_ui:'http://47.99.75.194:8084/takeoffland/capacityeval',
      type : '类型',
      label1:'起飞降落坪数量',
      safedis : '安全间隔设定',
      label2 : '进离场点高度',
      label3:'',
      accLabel : '导航精度误差',
      monitor_num:'监视容量',
      name_label:"起降区名称",
      object_post:{},
      update_ui:null,
      quiry_ui:'http://47.99.75.194:8084/takeoffland/search',
      safety_ui:'http://47.99.75.194:8084/takeoffland/idsafeintervalall',
    };
  },
  created() {
    this.fetchTableData('http://47.99.75.194:8084/takeoffland/selectall');
    },
  methods: {
    async handleSearch(){
    
     this.keytext = this.searchKeyword;
     await this.fetchAirspaceDemand();
   },

   async fetchAirspaceDemand() {
      try {
        const params = {};
        if (this.order) {
          const orderAsInt = parseInt(this.order, 10); 
          if (!isNaN(orderAsInt)) {
            params.type = orderAsInt; 
          }
        }

        if (this.keytext) {
          params.index = this.keytext;
        }

        console.log("查询数据", params)
        const response = await axios.get(this.quiry_ui,  { params });
        this.tableData = response.data.data;
        console.log("airspaceDemand接口返回的数据", response.data.data)
      } catch (error) {
        console.error('Error fetching airspace demand:', error);
      }
    },
    async fetchTableData(api_post){
      console.log("fetchTableData  执行")
        try{
          console.log("fetchTableData  开始执行")
          const response = await axios.get(api_post)
          console.log("fetchTableData  执行完成")
          if(response.data.message ==='success'){
            this.tableData = response.data.data;
            console.log(response.data);
            console.log("fetchTableData  执行完成,done")
            console.log(response.data.data);
          }
        }
        catch (error){
          console.error('获取数据失败',error);
        }

    },
    displayRowData(row) {
      this.selectedRow = row;
      this.object_post=row;
      this.show_if=true;
    },
    selectUpdown() {      
      this.fetchTableData('http://47.99.75.194:8084/takeoffland/selectall'),
      this.safety_ui='http://47.99.75.194:8084/takeoffland/idsafeintervalall',
      // this.showContent = true; 
      this.update_ui= 'http://47.99.75.194:8084/takeoffland/update';
      this.quiry_ui='http://47.99.75.194:8084/takeoffland/search';
      this.type = '类型';
      this.label1= '起飞（降落)坪数量）';
      this.label2  = '进离场点高度';
      this.safedis = '安全间隔设定';
      this.accLabel = '导航精度误差';
      this.monitor_num='监视容量';
      this.name_label="起降区名称";
      this.if_visiable=true;
      this.show_if=false;
      this.post_ui='http://47.99.75.194:8084/takeoffland/capacityeval';
      this.resetForm()

    },
    selectRoute() {
      this.quiry_ui='http://47.99.75.194:8084/airlane/search';
      this.fetchTableData('http://47.99.75.194:8084/airlane/selectall'),
      this.safety_ui='http://47.99.75.194:8084/airlane/idsafeintervalall',
      // this.showContent = true; 
      this.type = '类型';
      this.label1 = '可用飞行高度层';
      this.label2 = '';
      this.show_if=false;
      this.if_visiable=true;
      this.safedis = '安全间隔设定';
      this.accLabel = '导航精度误差';
      this.monitor_num = '监视容量';
      this.name_label="航路名称";
      this.post_ui='http://47.99.75.194:8084/airlane/capacityeval';
      this.resetForm()
    },
    selectTask() {
      this.quiry_ui='http://47.99.75.194:8084/workzone/search';
      this.safety_ui='http://47.99.75.194:8084/workzone/idsafeintervalall',
      this.fetchTableData('http://47.99.75.194:8084/workzone/selectall');
      // this.showContent = true; 
      this.type = '类型';
      this.if_visiable=true;
      this.show_if=false;
      this.label1 = '作业种类';
      this.label2 = '区域高度顶高';
      this.label3 = '区域高度底高'
      this.safedis = '安全间隔设定';
      this.monitor_num = '监视容量';
      this.accLabel = '导航精度误差';
      this.name_label="工作区名称";
      this.post_ui='http://47.99.75.194:8084/workzone/capacityeval'
      this.resetForm()
    },
    submitForm() {
      console.log('提交表单数据', this.formData);
    },
    resetForm() {
      this.formData = {
        // startPoint: '',
        // flightHeight: '',
        // safetyTypeh: '',
        // acc:'',
        // safetyTypez: '',
        // safetyTypec: ''
      };
    }
  }
};
</script>

<style scoped>
.title1{
  display: flex;
  height:3%;
  width:100%;
  background:url(@/assets/img/module4/part1/SketchPng9a3840ec9a1e44cb90b8cc0d22f86217e9bd2dd719c9cad7bfacd8322b4b85d6.png)
  no-repeat;
  background-size: auto 100%;
}

.image1{
  margin-left:1%;
  height:85%;

}

.text_1 {
  width: 80%;
  height: 100%;
  margin-left:1.5%;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  letter-spacing: 1px;
  font-size:2vh;
  font-family:PangMenZhengDao-3;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
}

.image2{
  margin-left: 10%;
  height:100%;
}


.total{
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column; 
}

.table-choice {
  display: flex;
  margin-top: 0.5%;
  align-items: center;
  height: 7%;
  width: 100%;
}

.button {
  display: flex; 
  background: url(@/assets/img/module4/part1/SketchPng672f442656b7e0f3c9863869768a199363cee97583efcf5fc791168bad3b2f9f.png)
  no-repeat  center center;
  background-size: contain;
  color: #ffffff;
  border: none;
  padding: 1.2vh 9vh;
  font-size: 1.5vh;
}

.button:hover {
  background:url(@/assets/img/module4/part1/SketchPng09fb34004ea1b0e5e91ff03feafa38bcb15201eba65a4db7b12083a8412bcc68.png)
  no-repeat  center center;
  background-size: contain;
  padding: 1.2vh 9vh;
}

.layout {
  display: flex;
  align-items: stretch; 
  width: 100%;
  height:100%;
  margin-top: 0.3%;
  /* padding: 20hv; */
}

.left_table{
  width: 26%;
  height:86%;
}

.operation-bar {
  display: flex;
  align-items: center;
  width: 100%;
  height: 4%;
  margin-bottom: 2%;
  /* 调整高度为合适的视口高度 */
  /* 使用视口单位的内边距 */
}

.dropdown-wrapper {
  width: 40%;
  margin-right:1%;
  /* margin-top:1%; */
}

.dropdown-native {
  width: 100%;
  margin-top:1%;
  padding: 0.5vh;
  font-size: 1.5vh;
  background-color: transparent;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #fff;
}

.dropdown-native::placeholder {
  color: white !important;
}

.native-action-button img {
  width: 100%;
  height: auto;
}


.selectOption {
color: #000000;

}

.search-wrapper {
  width: 40%;
  /* margin-top: 1%; */
  margin-right: 1vw;
}

.search-input::placeholder {
  color: white !important;
  opacity: 1;
}

.search-input {
  /* margin-top: 1.5%; */
  width: 100%;
  padding: 0.5vh;
  font-size: 1.5vh;
  background-color: transparent;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #fff;
}

/* .el-button{

  margin-left: 0.05vh;

} */
.el-query-button {
  display: flex;
  align-self: center;
  font-size: 1.5vh;
  padding: 0.6vh 0.5vh;
  margin-left:1%;
  /* margin-right: 2vw; */
}


.table_p{
  width: 100%;
  height:96%;
  overflow: auto;
}

.right_form{
  display: flex;
  width: 70%;
  height:86%;
  margin-left: 1%;
}


</style>
